<template>
  <div class="page">
    <van-nav-bar title="优购首页" />
    <my-search></my-search>
    <div class="content" @scroll="scroll">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiperdata" :key="index">
          <img :src="item.image_src" alt="" />
        </van-swipe-item>
      </van-swipe>
      <van-grid
        :border="false"
        :column-num="catitems.length > 4 ? 4 : catitems.length"
      >
        <van-grid-item
          :icon="item.image_src"
          v-for="(item, index) in catitems"
          :key="index"
          @click="jump(item)"
        />
      </van-grid>
      <ul>
        <li v-for="(item, index) in floordata" :key="index">
          <img class="title_img" :src="item.floor_title.image_src" alt="" />
          <div class="title_ct">
            <img :src="item.product_list[0].image_src" alt="" />
            <ol>
              <template v-for="(n, i) in item.product_list">
                <li v-if="i>0" :key="i">
                  <img :src="n.image_src" alt="" />
                </li>
              </template>
            </ol>
          </div>
        </li>
      </ul>
    </div>
    <div class="back" v-show="showIcon" @click="gotop">
      <van-icon name="arrow-up" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import mySearch from "../../components/mySearch.vue";
import api from "../../api/index";
import { useRouter } from 'vue-router';
export default {
  components: { mySearch },
  setup() {
    const { replace } = useRouter();
    const data = reactive({
      swiperdata: [], // 轮播图的数据
      catitems: [], // 导航的数据
      floordata: [], // 楼层
      showIcon: false,
    });
    api.get("/home/swiperdata").then((res) => {
      data.swiperdata = res.message;
    });
    api.get("/home/catitems").then((res) => {
      data.catitems = res.message;
    });
    api.get("/home/floordata").then((res) => {
      data.floordata = res.message;
    });
    let dom = null; // 存储滚动容器的
    let top = 0; // 滚动高度
    const scroll = (e) => {
      dom = e.target;
      top = dom.scrollTop;
        data.showIcon = top>200?true:false;
    };
    const gotop = () => {
      let time = setInterval(() => {
        if (top > 0) {
          top = top - 10;
          dom.scrollTop = top;
        } else {
          clearInterval(time);
        }
      });
    };
    const jump = (val) => {
      //  console.log(val);
      if (val.name === '分类'){
         replace('/classPage');
      }
    }
    return {
      ...toRefs(data),
      scroll,
      gotop,
      jump
    };
  },
};
</script>
<style lang="scss" scoped>
.page {
  .content {
    height: calc(100% - 86px);
    overflow: auto;
    // overflow-x: hidden;
    :deep(.van-icon__image) {
      width: 60px;
      height: 60px;
    }
    .title_img {
      height: 30px;
      margin: 20px 0;
    }
    .title_ct {
      display: flex;
      img {
        width: 30%;
        border-radius: 5px;
      }
      ol {
        margin-left: 10px;
        flex: 1;
        display: inline-flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 49%;
          img {
            width: 100%;
            border-radius: 5px;
          }
        }
      }
    }
  }
  .my-swipe {
    img {
      width: 100%;
    }
  }
}
.back {
  position: fixed;
  background: #fff;
  bottom: 100px;
  right: 15px;
  z-index: 99;
  font-size: 32px;
}
</style>